<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style id="css">
    body {
        margin: 0;
        padding: 0;
    }

    #wrap {
        overflow: hidden;
        position: relative;
    }

    #list {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #list li {
        height: 200px;
        float: left;
    }

    #list img {
        width: 100%;
        display: block;
    }

    #nav {
        position: absolute;
        left: 0;
        bottom: 3px;
        width: 100%;
        line-height: 10px;
        text-align: center;
    }

    #nav span {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: #C00;
        border-radius: 5px;
    }

    #nav .active {
        background: green;
    }
</style>
<script src="./transform.js"></script>
<script>
    //  document.addEventListener (
    //     "touchstart",
    //     function(e) {
    //         e.preventDefault();
    //     }
    // )
    window.onload = function () {
        var wrap = document.querySelector("#wrap");
        cssTransform(wrap, "scale")
        var list = document.querySelector("#list");
        list.innerHTML += list.innerHTML;
        var lis = document.querySelectorAll("#list li");
        var css = document.querySelector("#css");
        var nav = document.querySelectorAll("#nav span");
        var style = "#wrap{height:" + lis[0].offsetHeight + "px}";
        var timer = 0;
        style += "#list{width:" + lis.length + "00%}";
        style += "#list li{width:" + (1 / lis.length * 100) + "%}"
        css.innerHTML += style;
        var startPoint = 0;
        var startX = 0;
        var now = 0;
        cssTransform(list, "translateX", 0);
        auto();
        wrap.addEventListener(
            "touchstart",
            function (e) {
                clearInterval(timer);
                list.style.transition = "none";
                var translateX = cssTransform(list, "translateX");
                now = Math.round(-translateX / wrap.offsetWidth);
                if (now == 0) {
                    now = nav.length;
                }
                if (now == lis.length - 1) {
                    now = nav.length - 1;
                }
                cssTransform(list, "translateX", -now * wrap.offsetWidth);
                startPoint = e.changedTouches[0].pageX;
                // startX = list.offsetLeft;
                startX = cssTransform(list, "translateX");
            }
        )
        wrap.addEventListener(
            "touchmove",
            function (e) {
                var nowPoint = e.changedTouches[0].pageX;
                var dis = nowPoint - startPoint;
                cssTransform(list, "translateX", startX + dis);
                // var left = startX + dis;
                // list.style.left = left+"px";

                // translateX = startX + dis;
                // list.style.WebkitTransform = list.style.transform = "translateX("+translateX+"px)";
            }
        );
        wrap.addEventListener(
            "touchend",
            function (e) {
                // var left = list.offsetLeft;
                var translateX = cssTransform(list, "translateX");
                now = Math.round(-translateX / wrap.offsetWidth);
                tab();
                auto();
            }
        );

        function auto() {
            timer = setInterval(
                function () {
                    if (now == lis.length - 1) {
                        now = nav.length - 1;
                    }
                    list.style.transition = "none";
                    cssTransform(list, "translateX", -now * wrap.offsetWidth);
                    // 由于元素的渲染速度短于编码的读写速度 所以设定延迟
                    setTimeout(
                        function () {
                            now++;
                            tab();
                        },30
                    )
                }, 3000
            )
        }

        function tab() {
            list.style.transition = ".5s";
            cssTransform(list, "translateX", -now * wrap.offsetWidth);
            for (var i = 0; i < nav.length; i++) {
                nav[i].className = "";
            }
            nav[now % nav.length].className = "active";
        }
    }
</script>

<body>
    <div id="wrap">
        <ul id="list">
            <li>
                <a href="#">
                    <img src="./img/1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/3.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/4.jpg" alt="">
                </a>
            </li>
        </ul>
        <nav id="nav">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </nav>
    </div>
</body>

</html>